<template>
  <div class="audition180">
    <p>AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范</p>
    <p>由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，即RequireJS</p>
    <p>实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出</p>
    <p>requireJS主要解决两个问题</p>
    <p>1. 多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器</p>
    <p>2. js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长</p>
    <p>看一个使用requireJS的例子</p>
    <v-md-preview :text="text1" />
    <p>语法</p>
    <p>requireJS定义了一个函数 define，它是全局变量，用来定义模块</p>
    <code class="code">
      <span class="color1">define</span>(<span class="color2">id?</span>, <span class="color3">dependencies?</span>, <span class="color4">factory</span>);
    </code>
    <p>id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）</p>
    <p>dependencies：是一个当前模块依赖的模块名称数组</p>
    <p>factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值</p>
    <p>在页面上使用require函数加载模块</p>
    <code class="code">
      <span class="color1">require</span>(<span class="color2">[dependencies]</span>, <span class="color3">function(){}</span>)
    </code>
    <p>require()函数接受两个参数</p>
    <p>第一个参数是一个数组，表示所依赖的模块</p>
    <p>第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。</p>
    <p>加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块</p>
    <p>require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。</p>
  </div>
</template>

<script>
const prefix = '``` js'
const suffix = '```'
export default {
  name: 'Audition180',
  data() {
    return {
      text1: `${prefix}
      // 定义模块 myModule.js
      define(['dependency'], function(){
        var name = 'Byron';
        function printName(){
          console.log(name);
        }

        return {
          printName: printName
        };
      });

      // 加载模块
      require(['myModule'], function (my){
      　 my.printName();
      });
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>